<template>
  <view
    @tap="handleItemClick"
    class="bg-white rounded-[28rpx] p-[32rpx] shadow-md relative flex flex-col hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
  >
     <!-- 头部 -->
     <view class="flex justify-between items-start mb-[18rpx]">
      <view class="flex-1">
        <view class="text-[32rpx] font-bold text-[#222] truncate flex item-start">
          <image v-if="recruitmentType == 1" class="mr-2 w-[40rpx] h-[40rpx]" :src="te"/>
          <text>{{ item.position_name }}</text>
          
        </view>
        <view class="text-[24rpx] text-[#666] mt-[4rpx]">
          {{ item.corporate_name }} | {{ item.location }}
        </view>
      </view>
    </view>

    <!-- 岗位信息 -->
    <view class="flex gap-[10rpx] mb-[18rpx] text-[24rpx] text-[#666]">
      <view>薪资：
        <text class="text-[#ff0000]"> {{ item.salary_min }}-{{ item.salary_max }}元</text>
      </view>
      <!-- <view>招聘人数：{{ item.recruitNum }}人</view> -->
      <view class="ml-auto">经验要求：{{ item.experience }}</view>
    </view>
    <view class="text-[24rpx] text-[#666]">职位描述：{{ item.description }}</view>
    <!-- 元信息 -->
    <view class="flex justify-between text-[22rpx] text-[#999] my-[18rpx]">
      <view>发布时间：{{ dayjs(item.publishTime).format('MM-DD') }}</view>
    </view>

    <!-- 标签 -->
    <view class="flex flex-wrap gap-x-[10rpx] gap-y-[10rpx] mb-[10rpx]">
      <view
        v-for="(tag, tIndex) in item.tags"
        :key="tIndex"
        class="text-[20rpx] px-[16rpx] py-[6rpx] bg-[#f1f8e9] rounded-[10rpx] text-[#558b2f] font-medium"
      >
        {{ tag }}
      </view>
    </view>

    <!-- 底部操作区 -->
    <view
      class="flex justify-end items-center mt-[10rpx] pt-[10rpx] border-t border-[#f5f7fa] gap-[12rpx]"
    >
      <nut-button
        size="small"
        type="info"
        @click.stop="handleViewDetails"
      >
        查看详情
      </nut-button>
      <nut-button
        size="small"
        type="primary"
        @click.stop="handleContact"
      >
        联系招聘方
      </nut-button>
      <nut-button
        v-if="item.memberStatus == 5"
        disabled
        size="small"
      >
        已取消
      </nut-button>
      <nut-button
        v-else
        size="small"
        type="warning"
        @click.stop="handleCancel"
      >
        取消报名
      </nut-button>
      
    </view>
  </view>
</template>

<script setup>
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";
import { Button as nutButton } from "@nutui/nutui-taro";
import { post } from "@/utils/request";
import dayjs from "dayjs";
import te from  '@/assets/pic/te.png'

// 接收父组件传入的单个招聘项数据
const props = defineProps({
  recruitmentType:{
    type: Number,
  },
  item: {
    type: Object,
    required: true,
    default: () => ({}),
  }
});

// 向父组件传递事件
const emit = defineEmits(["click", "viewDetails", "contact", "cancel", "reload"]);

// 处理整个项点击
const handleItemClick = () => {
  emit("click", props.item);
};

// 处理查看详情
const handleViewDetails = () => {
  emit("viewDetails", props.item);
};

// 处理联系招聘方
const handleContact = () => {
  console.log("contact", props.item);
  // // 可直接调用拨号功能
  // Taro.makePhoneCall({
  //   phoneNumber: props.item.contactPhone.replace('*', '')
  // }).catch(err => console.log('拨号失败', err))
  Taro.navigateTo({
    url: `/pages/message/chat?userId=${props.item.member_id}`
  });
};

// 处理取消报名
const handleCancel = () => {
  // emit("cancel", props.item);
  Taro.showModal({
    title: '确认取消',
    content: '确定要取消报名吗？',
    success: (res) => {
      if (res.confirm) {
      post("/recruitment/updateSignUp", {
        id: props.item.rmId,
        status: 5
      }).then(res=>{
        if(res.code==0){
          Taro.showToast({
            title: '取消',
            icon: 'success'
          })
          emit("reload");
        }else{
          Taro.showToast({
            title: res.msg,
            icon: 'error'
          })
        }

      })
        //emit("giveUp", props.item);
      }
    }
  })
};
</script>